<template>
	<Header title="借阅列表">
		<view class="container">
			<view class="search-warp">
				<view class="icon"></view>
				<input placeholder="请输入关键字" />
			</view>
		</view>
	</Header>
	<view class="book-list">
		<view class="item" v-for="item in state.bookList" :key="item.book_id" @click="handleReturnBook(item)">
			<view class="box">
				<button class="button-status" :class="borrowlStatusOptions.useDictItem(item.status)?.type">
					{{ item.status_val }} - {{ borrowlStatusOptions.useDictItem(item.status)?.label }}
				</button>
				<view class="image">
					<image :src="item.book_img" mode="widthFix" />
				</view>
				<view class="info">
					<view class="title">{{ item.book_name }}</view>
					<view class="content">
						<view>
							<view class="label">借阅日期：</view>
							<text class="cotnent">{{ item.create_date }} - {{ item.due_date }}</text>
						</view>
						<view>
							<view class="label">可借天数：</view>
							<text class="cotnent">{{ item.days }}天</text>
						</view>
						<view>
							<view class="label">剩余：</view>
							<text class="cotnent">{{ item.surplus }}天</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	<Footer />
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import Header from "@/components/header/index.vue"
import Footer from "@/components/footer/index.vue"
import { useDict } from "@/dict";
import { category, booklist, returnBook } from "@/api/book.js"
import { userinfo, borrowlist } from "@/api/public.js"
// 状态
const borrowlStatusOptions = useDict('borrowlStatusOptions')
const state = reactive({
	categoryList: [],
	bookList: []
})
const form1 = ref(null)
const field = reactive({
	name: '',
})
const handleReturnBook = (row) => {
	const isReturnBook = borrowlStatusOptions.useDictItem(row.status)?.returnBook
	if(!isReturnBook) { return }
	returnBook({id: row.id}).then(() => {
		wx.showToast({
			title: "归还成功",
			icon: "none"
		})
		getList()
	})
}
const getList = () => {
	borrowlist({
		pageIndex: 1,
		pageSize: 10
	}).then(res => {
		state.bookList = res.content?.data || []
	})
	
}
onMounted(() => {
	getList()
})

</script>

<style lang="scss" scoped>
.search-warp {
	display: flex;
	align-items: center;
	border: 1px solid #E3E3E3;
	height: 80rpx;
	box-sizing: border-box;
	border-radius: 100px;
	background-color: #fff;
	padding-right: 24rpx;
	width: 100%;
	margin-top: 22px;
	.icon {
		width: 150rpx;
	}
	input {
		outline: none;
		border: none;
		background: none;
		padding: 0;
		width: 100%;
	}
}
.book-list {
	background-color: #EEF8F4;
	display: flex;
	flex-wrap: wrap;
	padding: 0 14rpx;
	.item {
		width: 100%;
		box-sizing: border-box;
		padding: 0 14rpx;
		margin-top: 26rpx;
		box-sizing: border-box;
	}
	.image {
		width: 180rpx;
	}
	.info {
		position: relative;
		flex: 1;
		width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.box {
		position: relative;
		background-color: #fff;
		display: flex;
		box-shadow: 0rpx 10rpx 46rpx 0rpx rgba(0,0,0,0.07);
		border-radius: 32rpx;
		padding: 44rpx;
		image {
			width: 100%;
		}
		.title {
			display: -webkit-box;
		  text-overflow: ellipsis;
		  line-clamp: 2;      //这个就是设置超出5行后显示...
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  -webkit-box-orient: vertical;
			font-size: 24rpx;
			padding: 16rpx 0;
		}
	}
	.content {
		> view{
			font-size: 20rpx;
			color: #666666;
			display: flex;
			+ view { margin-top: 24rpx; }
		}
		.label {
			width: 100rpx;
			text-align: right;
		}
	}
}
.button-status {
	position: absolute;
	border-radius: 50px;
	right: 24rpx;
	bottom: 24rpx;
	background-color: red;
	border: none;
	padding: none;
	font-size: 24rpx;
	color: #fff;
}
</style>
